<div class="card">
    <div class="card-header d-flex p-0">
        <ul class="nav nav-pills p-2">
            <li class="nav-item"><a class="nav-link active" href="#tab_1" data-toggle="tab">基本信息</a></li>
            <li class="nav-item"><a class="nav-link" href="#tab_2" data-toggle="tab">访问授权</a></li>
        </ul>
    </div><!-- /.card-header -->
    <div class="card-body p-0">
        <div class="tab-content">
            <div class="tab-pane active" id="tab_1">
                <!-- form start -->
                <form role="form">
                    <div class="card">

                        <!--<div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-tag"></i>
                                新增角色
                            </h3>
                        </div>-->
                        <!-- /.card-header -->
                        <div class="card-body">
                            <input type="hidden" id="role_id" name="id" value="{:$data['role_id']}" placeholder="">
                            <div class="form-group">
                                <label for="name">角色名称</label>
                                <input type="text" class="form-control" id="role_name" name="role_name" value="{:$data['role_name']}" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="description">角色描述</label>
                                <input type="text" class="form-control" id="desc" value="{:$data['desc']}" name="desc" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="">角色状态</label>
                                <div style="display: flex">
                                    <div class="custom-control custom-radio col-3">
                                        {if condition="$data['status']==1"}
                                        <input class="custom-control-input" type="radio" id="customRadio1" value="1" name="status" checked>
                                        {else /}
                                        <input class="custom-control-input" type="radio" id="customRadio1" value="1" name="status" >
                                        {/if}
                                        <label for="customRadio1" class="custom-control-label">开启</label>
                                    </div>
                                    <div class="custom-control custom-radio col-3">
                                        {if condition="$data['status']==1"}
                                        <input class="custom-control-input" type="radio" id="customRadio2" value="0" name="status">
                                        {else /}
                                        <input class="custom-control-input" type="radio" id="customRadio2"  value="0" name="status" checked >
                                        {/if}
                                        <label for="customRadio2" class="custom-control-label">禁用</label>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- /.card-body -->

                        <div class="card-footer">
                            <button type="button" id="submit" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="tab-pane" id="tab_2">
                <div class="card m-btm-0" style="box-shadow:none !important;">
                    <div class="card-header">
                        <button type="button" id="submit" class="btn btn-primary">保存</button>
                    </div>
                    <div class="card-body">
                        <ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


    <script type="text/javascript">
        function pageJs(layero, index, id, tr) {
            var zTreeObj,
                setting = {
                    check: {
                        enable: true
                    },
                    async: {
                        enable: true,
                        contentType: "application/json",
                        url: "{:url('admin/menu/jsonMenuData')}",
                        autoParam: ["id", "name"],
                        otherParam: ["role_id", id]
                    },
                    view: {
                        selectedMulti: false,
                        txtSelectedEnable: true
                    }
                };
            zTreeObj = $.fn.zTree.init($(layero).find("#tab_2 #tree"), setting, []);

            $(layero).find("#tab_2 #submit").on('click', function () {
                var nodes = zTreeObj.getChangeCheckedNodes(),
                    formData = new FormData();
                if ( !nodes.length ) {
                    formData.append('ids[]', '');
                } else {
                    $(nodes).each(function (k,v) {
                        formData.append( 'ids[]', v.id );
                    });
                }

                formData.append('role_id', id);
                $.ajax({
                    cache: true,
                    type: "POST",
                    url:"{:url('admin/role/doMenuAuth')}",
                    data:formData,
                    dataType:'json',
                    processData : false,
                    async: true,
                    contentType: false,
                    error:function(XMLHttpRequest, textStatus, errorThrown){
                        // alert(textStatus);
                    },
                    success: function( response ) {
                        var code = parseInt( response.error_code );
                        switch (code) {
                            case 1:
                                popupBox( getMsgBox( {'success': response.msg}, 'success' ), function (alert_layero, alert_index) {
                                    setTimeout(function () {
                                        layer.close( alert_index )
                                    }, 600);
                                } );

                                setTimeout(function () {
                                    layer.close( index );
                                    location.reload();
                                }, 800);
                                break;
                            case 10000:
                                popupBox( getMsgBox( response.msg, 'danger' ) );
                                break;
                            default:
                                popupBox( getMsgBox( '操作出现问题了', 'danger' ) );
                        }
                    }
                });
            });

            $(layero).find("#tab_1 #submit").on('click', function () {
                var formData = new FormData($(layero).find('#tab_1 form')[0]);
                $.ajax({
                    cache: true,
                    type: "POST",
                    url:"{:url('admin/role/doEdit')}",
                    data:formData,
                    dataType:'json',
                    processData : false,
                    async: true,
                    contentType: false,
                    error:function(XMLHttpRequest, textStatus, errorThrown){
                        // alert(textStatus);
                    },
                    success: function( response ) {
                        var code = parseInt( response.error_code );
                        switch (code) {
                            case 1:
                                popupBox( getMsgBox( {'success': response.msg}, 'success' ), function (alert_layero, alert_index) {
                                    setTimeout(function () {
                                        layer.close( alert_index )
                                    }, 600);
                                } );

                                setTimeout(function () {
                                    layer.close( index );
                                    location.reload();
                                }, 800);
                                break;
                            case 10000:
                                popupBox( getMsgBox( response.msg, 'danger' ) );
                                break;
                            default:
                                popupBox( getMsgBox( '操作出现问题了', 'danger' ) );
                        }
                    }
                });
            });
        }

    </script>
